<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="./index.css" />
</head>

<body>
	<div class="container">
		<ul class="slider">
			<li>
				<div>
					<div class="icon">
						<svg class="svg-inline--fa fa-pencil-alt fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas"
							data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
							data-fa-i2svg="">
							<path fill="currentColor"
								d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z">
							</path>
						</svg>
					</div>
					<h3>Manage Databases</h3>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
						aperiam nesciunt similique!
					</p>
				</div>
				<div>
					<div class="icon">
						<svg class="svg-inline--fa fa-pencil-alt fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas"
							data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
							data-fa-i2svg="">
							<path fill="currentColor"
								d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z">
							</path>
						</svg>
					</div>
					<h3>Manage Databases</h3>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
						aperiam nesciunt similique!
					</p>
				</div>
				<div>
					<div class="icon">
						<svg class="svg-inline--fa fa-pencil-alt fa-w-16" aria-hidden="true" focusable="false" data-prefix="fas"
							data-icon="pencil-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
							data-fa-i2svg="">
							<path fill="currentColor"
								d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z">
							</path>
						</svg>
					</div>
					<h3>Manage Databases</h3>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
						aperiam nesciunt similique!
					</p>
				</div>
			</li>
			<li>
				<div>2</div>
				<div>2</div>
				<div>2</div>
			</li>
			<li>
				<div>3</div>
				<div>3</div>
				<div>3</div>
			</li>
		</ul>
		<div class="arrow">
			<span class="arrow_left">
				<svg t="1654306402819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
					p-id="1527" width="64" height="64">
					<path
						d="M161.1 511.2l373.6-373.6c26.4-26.4 61-39.5 95.6-39.5 34.6 0 69.2 13.2 95.6 39.5 52.7 52.7 52.7 138.5 0 191.2L400.4 654.3c-10.3 10.3-27 10.3-37.3 0-10.3-10.3-10.3-27 0-37.3l325.4-325.4c32.2-32.2 32.2-84.5 0-116.6-32.2-32.2-84.5-32.2-116.6 0L198.4 548.5M630.3 98.1"
						fill="#2197EF" p-id="1528"></path>
					<path d="M371 375.9l341.2 341.2c42.5 42.5 42.5 111.4 0 153.9s-111.4 42.5-153.9 0L217 529.9" fill="#CEE8FA"
						p-id="1529"></path>
					<path
						d="M198.4 548.5l336.3 336.3c25.5 25.5 59.5 39.6 95.6 39.6 36.1 0 70.1-14.1 95.6-39.6 52.7-52.7 52.7-138.5 0-191.2L389.6 357.3m-74.6 0l17.4 17.4 19.8 19.8 336.3 336.3c32.2 32.2 32.2 84.5 0 116.6-15.6 15.6-36.3 24.2-58.3 24.2s-42.7-8.6-58.3-24.2L235.7 511.2l-20.5-20.5-16.7-16.7"
						fill="#2197EF" p-id="1530"></path>
				</svg>
			</span>
			<span class="arrow_right">
				<svg t="1654306381788" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
					p-id="1258" width="64" height="64">
					<path
						d="M836.8 551.2L462 176.4c-32.3-32.3-84.8-32.3-117 0-32.3 32.3-32.3 84.8 0 117L671.5 620c10.3 10.3 10.3 27.1 0 37.4-10.3 10.3-27.1 10.3-37.4 0L307.6 330.8c-52.9-52.9-52.9-139 0-191.8 26.4-26.4 61.2-39.7 95.9-39.7s69.5 13.2 95.9 39.7l374.8 374.8M403.5 99.3"
						fill="#2197EF" p-id="1259"></path>
					<path d="M818.1 532.5L475.8 874.9c-42.6 42.6-111.8 42.6-154.4 0-42.7-42.6-42.7-111.8 0-154.4l342.4-342.4"
						fill="#CEE8FA" p-id="1260"></path>
					<path
						d="M645 359.4L307.6 696.8c-52.9 52.9-52.9 139 0 191.8 25.6 25.6 59.7 39.7 95.9 39.7s70.3-14.1 95.9-39.7l337.4-337.4m0-74.8L820 493.2l-20.6 20.6L462 851.2c-15.6 15.6-36.4 24.2-58.5 24.2s-42.9-8.6-58.5-24.2c-32.3-32.3-32.3-84.8 0-117l337.4-337.4 19.9-19.9 17.5-17.5"
						fill="#2197EF" p-id="1261"></path>
				</svg>
			</span>
		</div>
		<div class="labels"></div>
	</div>
</body>
<script>
	const ul = document.querySelector('.slider')
	const lis = document.querySelectorAll('.slider li')
	ul.appendChild(ul.children[0].cloneNode(true)) // 克隆最后一个节点
	const label = document.querySelector('.labels')
	label.insertAdjacentHTML('afterbegin', createdSpans())
	const spans = document.querySelectorAll('.labels span')
	label.children[0].classList.add('active')
	const arrow_left = document.querySelector('.arrow_left')
	const arrow_right = document.querySelector('.arrow_right')
	const width = 1200
	let currentCarouselIndex = 0
	let currentCircleIndex = 0
	let carouselTimer = null
	let time = 2000

	function createdSpans() {
		let str = []
		for (let i = 0; i < lis.length; i++) {
			str.push('<span></span>')
		}
		return str.join('')
	}

	ul.addEventListener('mouseover', function () {
		if (carouselTimer) clearInterval(carouselTimer)
	})
	ul.addEventListener('mouseout', function () {
		autoCarousel()
	})
	for (let index = 0; index < spans.length; index++) {
		let item = spans[index]
		item.addEventListener('click', function () {
			if (carouselTimer) clearInterval(carouselTimer)
			currentCarouselIndex = index
			currentCircleIndex = index

			animate(ul, -index * width)
			cancelActiveClass()
			item.classList.add('active')
			autoCarousel()
		})
	}

	arrow_left.addEventListener('click', throttle(handleArrow_left, 500))
	arrow_right.addEventListener('click', throttle(handleArrow_right, 500))

	function handleArrow_left() {
		if (carouselTimer) clearInterval(carouselTimer)
		if (currentCarouselIndex == 0) {
			currentCarouselIndex = lis.length
			ul.style.marginLeft = -currentCarouselIndex * width + 'px'
		}
		currentCarouselIndex--
		currentCircleIndex--
		if (currentCircleIndex < 0) {
			currentCircleIndex = spans.length - 1
		}
		cancelActiveClass()

		label.children[currentCircleIndex].classList.add('active')
		animate(ul, -currentCarouselIndex * width)

		autoCarousel()
	}

	function handleArrow_right() {
		if (carouselTimer) clearInterval(carouselTimer)
		if (currentCarouselIndex == lis.length) {
			ul.style.marginLeft = 0
			currentCarouselIndex = 0
		}
		currentCarouselIndex++
		currentCircleIndex++
		if (currentCircleIndex == spans.length) {
			currentCircleIndex = 0
		}
		cancelActiveClass()
		label.children[currentCircleIndex].classList.add('active')
		animate(ul, -currentCarouselIndex * width)
		autoCarousel()
	}

	function autoCarousel() {
		if (carouselTimer) clearInterval(carouselTimer)
		carouselTimer = setInterval(() => {
			// arrow_right.click()
			if (currentCarouselIndex == lis.length) {
				ul.style.marginLeft = 0
				currentCarouselIndex = 0
			}
			currentCarouselIndex++
			currentCircleIndex++
			if (currentCircleIndex == spans.length) {
				currentCircleIndex = 0
			}
			cancelActiveClass()
			label.children[currentCircleIndex].classList.add('active')
			animate(ul, -currentCarouselIndex * width)
		}, time)
	}
	autoCarousel()

	function cancelActiveClass() {
		Array.from(label.children).forEach((item) => {
			item.classList.remove('active')
		})
	}

	function animate(obj, target, speed = 10, time = 30, callback) {
		clearInterval(obj.timer)
		obj.timer = setInterval(() => {
			let step = (target - obj.offsetLeft) / speed
			step = step > 0 ? Math.ceil(step) : Math.floor(step)
			if (obj.offsetLeft == target) {
				clearInterval(obj.timer)
				callback && callback()
			}
			obj.style.marginLeft = obj.offsetLeft + step + 'px'
		}, time)
	}

	function throttle(fn, interval) {
		let startTime = 0
		return function (...args) {
			const nowTime = Date.now()
			if (interval - (nowTime - startTime) <= 0) {
				fn.apply(this, args)
				startTime = nowTime
			}
		}
	}
</script>

</html>